<template>
  <div>

    <div class="absolute top-2 left-5 text-xs	font-size: 0.75rem;">预警概览
      <span style="margin-left: 30px;">
        <!-- 注意：在真实的HTML中，内联样式通常不是最佳实践。考虑使用外部样式表。-->
        <select style="
              background-color: #153731; /* 背景色为蓝色 */
              border: 1px solid #44655d; /* 边框为黑色，宽度为1像素 */
              color: white; /* 文字颜色为白色，以便在蓝色背景上清晰可见 */
              width: 140px;
          ">
          <option value="正常">正常</option>
          <option value="预警">预警</option>
          <option value="异常" selected>异常</option>
        </select>
      </span>
    </div>

    <!-- 盒子内容 -->
    <div class="container">

      <div class=" text-center text-white text-xs mr-1 mt-4 ml-3 rounded-md shadow-inner" style="height: 40px;">
        <img src="../assets/imgs/1.jpg" style="width: 60px" />
        <span class="big-blue">26</span> <br />正常区域 <!-- 添加big-blue类到26上 -->
      </div>
      <div class="text-center text-white text-xs mr-1 mt-4 ml-6  rounded-md shadow-inner" style="height: 40px;">
        <img src="../assets/imgs/2.jpg" style="width: 57px" />
        <span class="big-yellow">35</span> <br />预警区域<!-- 添加big-blue类到26上 -->
      </div>
      <div class=" text-center text-white text-xs mr-1 mt-4 ml-5  rounded-md shadow-inner" style="height: 40px;">
        <img src="../assets/imgs/3.jpg" style="width: 53px" />
        <span class="big-red">92.12</span> <br /><span>异常区域</span> <!-- 添加big-blue类到26上 -->
      </div>
    </div>

    <div style="margin-top: 6px;"></div>
    <div ref="chart1" style="width: 100%; height: 250px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chart1 = ref();

onMounted(() => {

  var myChart = echarts.init(chart1.value);

  var value = [26, 35, 92.12];
  var value1 = [0.65, 0.12, -0.33];
  var max1 = Math.max.apply(null, value) * 1.2;
  var data1 = [];

  //data1存放背景条的数值，for循环使其数量与value一致
  for (var i = value.length - 1; i >= 0; i--) {
    data1.push(max1);
  }

  var option = {
    // backgroundColor: "#051F54",
    grid: {
      left: "-50",
      top: "30%",
      bottom: "20%",
      right: "8%",
      containLabel: true,
    },
    xAxis: {
      // type: "value",
      max: max1,
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    yAxis: {
      type: "category",
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        interval: 0,
        margin: 0,
        verticalAlign: "right",
        align: "left",
        padding: [-25, 0, 0, 0],
        textStyle: {
          color: "#ffffff",
          fontSize: 16,
        },
      },
      data: ["正常区域", "预警区域", "异常区域"],
    },
    series: [
      {
        //真实数值的条形图主体
        name: "真实值",
        type: "bar",
        animation: false,
        barWidth: "5%",
        label: {
          show: false,
          position: "insideLeft",
          padding: [50, 0, 0, -15],
          distance: 15,

          rich: {
            a: {
              fontSize: 10,
              color: "#fff",
              //padding: [20, -30, 0, -30],
            },
            b: {
              fontSize: 12,
              color: "#13C2C2",
              fontWeight: "bold",
              padding: [0, 0, 0, 10],
            },
            c: {
              fontSize: 12,
              color: "#FF4242",
              fontWeight: "bold",
              padding: [0, 0, 0, 15],
            },
          },
        },
        itemStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(2,50,147,1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(36,237,255,1)", // 100% 处的颜色
                },
              ],
            },
          },
        },
        data: value,
        z: 1,
      },
      {
        //辅助1：真实数值的圆点
        name: "真实值圆点",
        type: "scatter",
        symbolOffset: ["10%", "0"],
        symbolSize: 8,
        itemStyle: {
          borderWidth: 0,
          color: "rgba(255,255,255,1)",
        },
        data: value,
        z: 5,
      },
      {
        //辅助2：真实数值的圆点外侧圆环
        name: "真实值圆环",
        type: "scatter",
        symbolOffset: ["10%", "0"],
        symbolSize: 15,
        itemStyle: {
          borderWidth: 1,
          borderColor: "rgba(101,224,255,1)",
          //shadowBlur: 15,
          //shadowColor: 'rgba(101,224,255,1)',
          color: "rgba(255,255,255,0.43)",
        },
        data: value,
        z: 10,
      },
      {
        //辅助3：背景条
        name: "背景条",
        type: "bar",
        animation: false,
        barGap: "-100%",
        barWidth: "5%",
        label: {
          show: true,
          position: "insideRight",
          verticalAlign: "right",
          padding: [-18, -10, 0, 0],
          distance: 15,
          color: "#fff",
          formatter: function (params) {
            //console.info(params);
            return " " + value[params.dataIndex].toFixed(0);
          },
        },
        itemStyle: {
          normal: {
            color: "rgba(62,78,123,1)",
          },
        },
        data: data1,
        z: 0,
      },
    ],
  };


  myChart.setOption(option);
})
</script>



<style lang="scss" scoped>
.big-blue {
  font-size: 0.8rem;
  /* 增大字体大小 */
  color: #76ffff;
  /* 字体颜色改为蓝色 */
}

.big-yellow {
  font-size: 0.8rem;
  /* 增大字体大小 */
  color: #de0d0d;
  /* 字体颜色改为蓝色 */
}


.big-red {
  font-size: 0.8rem;
  /* 增大字体大小 */
  color: #dec60d;
  /* 字体颜色改为蓝色 */
}

.big-blue2 {
  font-size: 0.5rem;
  /* 增大字体大小 */
}

.container {
  display: flex;
}

.bg-regal-bg2 {
  width: 80px;
}
</style>